<template>
  <!-- 歌单列表页面 -->
  <div class="songtable">
    <div class="addbox">
      <el-button size="mini" type="primary" class="el-icon-plus" @click="add()">
        增加</el-button
      >
    </div>
    <div class="addbox">
      <el-input v-model="input" placeholder="搜索歌单"></el-input>
      <span @click="search" class="iconfont icon-sousuo"></span>
    </div>
    <el-table
      :data="
        songtable.slice((currentPage - 1) * pagesize, currentPage * pagesize)
      "
      border
      style="width: 100%"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <el-table-column prop="" label="序号" width="80">
        <template slot-scope="scope">
          {{ pagesize * (currentPage - 1) + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="id" width="180"> </el-table-column>
      <el-table-column prop="" label="图片" width="180">
        <template slot-scope="scope">
          <img :src="scope.row.imgUrl" alt="" width="60px" height="60px" />
        </template>
      </el-table-column>

      <el-table-column prop="songsheetName" label="歌单名称" width="180">
      </el-table-column>
      <el-table-column prop="userId" label="创建者" width="100px">
      </el-table-column>
      <el-table-column prop="" label="歌曲数量">
        <template slot-scope="scope"> {{ scope.row.music.length }}首 </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            icon="el-icon-search"
            @click="look(scope.$index, scope.row.id)"
            >详情</el-button
          >
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-edit"
            @click="edit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 4, 5]"
      :page-size="pagesize"
      layout="total,sizes,  prev, pager, next, jumper"
      :total="totalCount"
    >
    </el-pagination>
    <div class="boxshadow" v-if="isShow">
      <div class="content">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="歌单名称" prop="songsheetName">
            <el-input v-model="ruleForm.songsheetName"></el-input>
          </el-form-item>
          <el-form-item label="歌单图片" prop="songsheetName">
            <input
              name="file"
              type="file"
              accept="image/png,image/gif,image/jpeg"
              @change="update"
            />
            <img :src="ruleForm.singerUrl" alt="" srcset="" width="200px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addsongtable()" v-if="show"
              >立即添加</el-button
            >
            <el-button type="primary" @click="save()" v-if="!show"
              >保存</el-button
            >
            <el-button @click="cancel()">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      ids: 0,
      isShow: false,
      show: true,
      currentPage: 1,

      // 每页数据
      pagesize: 2,
      totalCount: 0,
      input: "",
      region: "",
      formLabelWidth: "120px",
      dialogFormVisible: false,
      //初始页
      currentPage: 1,
      // 每页数据
      pagesize: 5,
      totalCount: 0,
      songtable: [],
      ruleForm: {
        songsheetName: "",
        singerUrl: "",
        releaseTime: "",
      },
      rules: {
        songsheetCode: [
          { required: true, message: "请输入歌单名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 每页显示几条
    handleSizeChange(val) {
      this.pagesize = val;
    },
    // 操作当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(val);
      // this.getPackData();//获取用户点击的当前页后刷新页面数据
    },
    // 增加
    add() {
      this.isShow = !this.isShow;
    },
    // 查看歌单详情
    look(index, row) {
      this.$router.push({ path: "/songtablelist", query: { id: row } });
    },
    // 添加歌单
    addsongtable(val) {
      this.show = true;
      if (this.ruleForm.songsheetName != "") {
        this.$axios.post("api/songSheet/addSongSheet", {
          songsheetName: this.ruleForm.songsheetName,
          userId: 1,
          imgUrl: this.ruleForm.singerUrl,
        });
        alert("添加歌单成功");
        this.isShow = !this.isShow;
        this.ruleForm.songsheetName = "";
        this.ruleForm.singerUrl = "";
      } else {
        alert("请将信息填写完整");
      }
    },
    // 删除
    handleDelete(index, row) {
      this.songtable.splice(this.pagesize * (this.currentPage - 1) + index, 1);
      // this.$axios.post(`api/songSheet/deleteSongSheetById?id=${row}`);
    },
    onSubmit() {
      console.log("submit!");
    },
    // 编辑
    edit(index, row) {
      this.isShow = !this.isShow;
      this.show = false;
      console.log(row);
      this.ruleForm.songsheetName = row.songsheetName;
      this.ruleForm.singerUrl = row.imgUrl;
      this.ids = row.id;
    },
    // 取消
    cancel() {
      this.isShow = !this.isShow;
      this.ruleForm.songsheetName = "";
      this.ruleForm.singerUrl = "";
    },
    save() {
      if (this.ruleForm.songsheetName != "" && this.ruleForm.singerUrl != "") {
        this.$axios.post("api/songSheet/updateSongSheetById", {
          id: this.ids,
          state: 1,
          songsheetName: this.ruleForm.songsheetName,
          includeSinger: 0,
          imgUrl: this.ruleForm.singerUrl,
        });
        alert("修改成功");
        location.reload();
        this.isShow = !this.isShow;
        this.ruleForm.songsheetName = "";
        this.ruleForm.singerUrl = "";
      } else {
        alert("请将信息填写完整");
      }
    },
    search() {
      this.$axios
        .get(`api/songSheet/searchSongSheet?keyWord=${this.input}`)
        .then((res) => {
          console.log(res.data.data);
        });
    },
    update(e) {
      let file = e.target.files[0];
      // console.dir(URL.createObjectURL(file));
      this.url = URL.createObjectURL(file);
      let param = new FormData(); // 创建form对象
      param.append("file", file); // 通过append向form对象添加数据
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      // 添加请求头
      axios
        .post("http://192.168.0.26:8081/file/uploadFile", param, config)
        .then((res) => {
          this.ruleForm.singerUrl = res.data.data;
        });
    },
  },

  mounted() {
    // axios
    //   .get("http://192.168.0.26:8081/songSheet/getAllSongSheet")
    //   .then((res) => {
    //     console.log(res.data);
    //     for (let i = 0; i < res.data.data.length; i++) {
    //       if (res.data.data[i].imgUrl != "") {
    //         res.data.data[i].imgUrl =
    //           "http://192.168.0.26:8081" + res.data.data[i].imgUrl;
    //       }
    //     }
    //     console.log(res.data.data);
    //     this.songtable = res.data.data;
    //     this.totalCount = this.songtable.length;
    //   });
    this.$axios.get("/api/songSheet/getAllSongSheet").then((res) => {
      console.log(res.data);
      for (let i = 0; i < res.data.data.length; i++) {
        if (res.data.data[i].imgUrl != "") {
          res.data.data[i].imgUrl =
            "http://192.168.0.26:8081" + res.data.data[i].imgUrl;
        }
      }
      console.log(res.data.data);
      this.songtable = res.data.data;
      this.totalCount = this.songtable.length;
    });
    this.$axios.get("api/songSheet/getSongSheetById", {
      params: {
        id: 1,
      },
    });
  },
};

//
</script>
<style scoped>
.songtable {
  margin: 20px 20px;
  border-radius: 5px;
  padding: 10px 20px;
  box-sizing: border-box;
  background: white;
}
.addbox {
  display: flex;
  align-content: space-around;
  margin: 10px 10px 20px 10px;
  width: 300px;
}
span {
  display: block;
  background: skyblue;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin-left: 20px;
  font-size: 20px;
  color: white;
  border-radius: 5px;
}
.addbox > input {
  margin-right: 10px;
}
.boxshadow {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10;
  top: 45px;
  left: 220px;
  text-align: left;
}
.content {
  margin-left: 500px;
  margin-top: 80px;
  border-radius: 25px;
  width: 600px;
  background-color: #fff;
  padding: 50px 20px;
}
</style>